// 使用Fetch API获取后端数据
fetch('/tci')
    .then(response => response.json())
    .then(data => {
        // 数据获取成功后的处理逻辑
        // console.log("here");
        // console.log(data);
        yijianlingxiu = data.result;
        const instances = data.result; // 假设数据中的实例数组键名为instances
        console.log(instances);
        for (let idx = 0; idx < instances.length; idx++) {
            let instance = instances[idx];

            let div = $("<div/>", {
                id: "user-container-" + idx,
                style: "height: 90%;width: 50%; display: flex;flex-direction:column;justify-content: stretch;background: #193a7d;padding: 5px;border: solid 1px white; flex-shrink:0;align:center; margin: 10px 0;",
                html: `
        <div class="user_profile" id="user_profile_" style="display: flex;flex-direction: row;justify-content: space-between;height: 45px;width: 95%">
            <div style="display: flex;justify-content: start;align-items: center">
              <img src="/static/resource/pics/lani.jpg" alt="" style="height: 30px;width: 30px;border-radius:100%">
              <span style="margin: 0 5px">${instance.user_name}</span>
            </div>
            <div style="display: flex;">
              <div>${instance.fans_cnt}</div>
              <div>M</div>
              <i class="bi bi-person-plus"></i>
            </div>
            
        </div>
        <div  style="width: 95%;margin: 0 auto;height : 200px;text-overflow: ellipsis;front-size:12px;overflow-y: auto;text-align:left">${instance.tweet}</div>      
        <div style="width:=80%;flex-group:0;flex-shrink=1;margin: 5px auto 5px 10px;;text-align: center;height: 20px;">发布时间: ${instance.date} ${instance.time}</div>
        <div style="height: 30px;display: flex;flex-direction: row;justify-content: space-between;width: 80%;margin: 0 auto;">
            <i class="bi bi-hand-thumbs-up-fill">
            <span style="margin-left: 5px;font-style: normal">${instance.like_cnt}</span>
            </i>
            <i class="bi bi-chat-dots">
            <span style="margin-left: 5px;font-style: normal">${instance.comment_cnt}</span>
            </i>
            <i class="bi bi-repeat">
            <span style="margin-left: 5px;font-style: normal">${instance.trans_cnt}</span>
            </i>
            <i class="bi bi-share">
            <span style="margin-left: 5px;font-style: normal">${instance.share_cnt}</span>
            </i>
        </div>
        `
            });

            div.appendTo("#left_block_d_c"); // 替换 #parent-container 为实际的父容器的选择器
        }
        download_people(yijianlingxiu)
    })
    .catch(error => {
        // 错误处理逻辑
        console.log('An error occurred:', error);
    });


function download_people(data) {
    var downloadButton = document.getElementById("download-button-people")
    downloadButton.addEventListener('click', () => {
        downloadCSVFile();
    });
    function downloadCSVFile() {
        var csv = '';
        var keys = Object.keys(data[0]);

        var csv = Papa.unparse(data);
        var blob = new Blob([csv], { type: 'text/csv' });
        var url = URL.createObjectURL(blob);

        var link = document.createElement('a');
        link.href = url;
        link.download = '意见领袖.csv';
        link.click();
    }
}
// let parDiv = document.getElementById("left_block_d_c")
// for(let idx = 0; idx < 10; idx ++){
//     console.log("here")
//     let sonDiv = document.createElement("div");
//     sonDiv.innerHTML = idx;
//     sonDiv.style.width = '90%';
//     sonDiv.style.flexShrink = '0';
//     parDiv.appendChild(sonDiv);
// }
